<template>
  <div class="corner-mark" :class="{ 'upper-left': upperLeft }">
    <span class="text">
      <slot></slot>
    </span>
  </div>
</template>

<script lang="ts" setup>
interface Props {
  width?: string
  height?: string
  bg?: string
  top?: string
  left?: string
  right?: string
  upperLeft?: boolean
}

withDefaults(defineProps<Props>(), {
  width: '60px',
  height: '60px',
  top: '-1.5px',
  left: '-1.5px',
  right: '-1.5px',
  bg: '#f58274',
  upperLeft: false
})
</script>

<script lang="ts">
export default {
  name: 'CornerMark'
}
</script>

<style lang="scss" scoped>
.corner-mark {
  position: absolute;
  top: v-bind(top);
  right: v-bind(right);
  width: v-bind(width);
  height: v-bind(height);
  border-top-right-radius: 5px;
  z-index: 10;
  overflow: hidden;

  & > .text {
    position: absolute;
    z-index: 11;
    color: #fff;
    transform: rotate(45deg);
    top: 10px;
    right: 0;
  }

  &::after {
    content: '';
    color: #fff;
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-top: v-bind(width) solid v-bind(bg);
    border-left: v-bind(height) solid transparent;
  }
}

.corner-mark.upper-left {
  position: absolute;
  top: v-bind(top);
  left: v-bind(left);
  width: v-bind(width);
  height: v-bind(height);
  border-top-left-radius: 5px;
  z-index: 10;
  overflow: hidden;

  & > .text {
    position: absolute;
    z-index: 11;
    color: #fff;
    transform: rotate(-45deg);
    top: 10px;
    left: 0;
  }

  &::after {
    content: '';
    color: #fff;
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-top: v-bind(width) solid v-bind(bg);
    border-right: v-bind(height) solid transparent;
  }
}
</style>
